<template>
  <van-row style="padding: 16px 20px;">
    <van-col span="4" style="display: flex; align-items: center;">
      <router-link to="javascript:void(0)" class="back-button" @click="$router.go(-1)">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M15.41 7.41L14 6L8 12L14 18L15.41 16.59L10.83 12L15.41 7.41Z" fill="#000000"/>
        </svg>
      </router-link>
    </van-col>

    <van-col span="16">
      <span style="font-size: 18px; font-weight: bold; display: block; text-align: center;">投诉举报</span>
    </van-col>
  </van-row>
  <div>
    <van-form @submit="onSubmit">
    <!-- 单选按钮组，每个选项将在新的一行显示 -->
    <van-field name="radio" label="举报类型">
      <template #input>
        <van-radio-group v-model="complaintType">
          <van-radio name="不友善内容">不友善内容</van-radio>
          <van-radio name="色情低俗内容">色情低俗内容</van-radio>
          <van-radio name="政治敏感">政治敏感</van-radio>
          <van-radio name="欺诈">欺诈</van-radio>
          <van-radio name="骚扰">骚扰</van-radio>
          <van-radio name="其他违法违规">其他违法违规</van-radio>
        </van-radio-group>
      </template>
    </van-field>

    <!-- 文本输入区 -->
    <div class="text-input">
      <p>投诉内容：</p>
      <van-field v-model="description" rows="2" autosize type="textarea" maxlength="200" placeholder="请提供相应的证据，以便我们处理。" show-word-limit/>
    </div>

    <!-- 图片上传 -->
    <div class="image-upload">
      <p>添加照片证据（至少1张）：</p>
      <van-uploader :after-read="handleRead" :max-size="5 * 1024 * 1024" upload-text="点击上传"/>
    </div>

    <!-- 提交按钮 -->
    <div class="button-container">
      <van-button type="primary" @click="onSubmit">提交</van-button>
    </div>
    </van-form>
  </div>
</template>

<script setup>
import axios from 'axios';
import {ref} from "vue";
import { useRoute } from 'vue-router';
import {post} from "../../util/request.js";
import {postFile} from "../../util/reqeustfile.js";
const route = useRoute();
const articleId = ref(route.params.articleId || '');
const complaintType = ref('不友善内容'); // 默认选择不友善内容
const description = ref('');
const urlList = ref([]);
const handleRead =( async (file) =>{
  // console.log(file)
  // console.log(file.file)
  // const formData = new FormData();
  // formData.append('file', file.file); // 确保file.file是正确的，如果file就是文件对象，则应该是formData.append('file', file);

  // 发送POST请求到您的后端接口，确保传递formData且不包含多余的headers配置
  const response = await postFile('study/article/upload', file);
  urlList.value.push(response.data);
  console.log(urlList.value);
  // 这里可以根据需要处理成功的逻辑，比如显示提示信息
});
const onSubmit = () => {
  // 发送请求到后端接口
  post('study/tousu/addTousu', {
    complaintType: complaintType.value,
    description: description.value,
    urlList: urlList.value,
    articleId: articleId.value
  })
      .then(response => {
        if (response.data.success) {
          alert('举报成功')
          this.$router.push('/articleDetails?articleId=' + articleId.value);
          console.log('Article created successfully');
          // 这里可以根据需要处理成功的逻辑，比如显示提示信息
          //清空数据
          //返回上一级
          this.$router.go(-1);
          complaintType.value = '不友善内容';
          description.value = '';
          urlList.value = [];
        } else {
        }
      }, error => {
        console.error('Error creating article:', error);
        // 处理错误逻辑
      });
}
</script>